<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,initial-scale=1.0,user-scalable=no">
    <meta http-equiv="Cache-Control" content="no-siteapp"/>

    <title>Title</title>

    <link rel="shortcut icon" href="http://www.s.mmm-party.com/assets/img/favicon.ico">

    <!--<link rel="stylesheet" href="http://cdn.amazeui.org/amazeui/2.7.2/css/amazeui.css">-->
    <link rel="stylesheet" href="http://cdn.amazeui.org/amazeui/2.7.2/css/amazeui.min.css">
    <!--<link rel="stylesheet" href="src/css/media-queries.css">-->
    <link rel="stylesheet" href="src/css/login.css">

    <script src="src/lib/jquery.min.js"></script>
    <script src="src/lib/jquery.cookie.js"></script>

    <!--<script src="http://cdn.amazeui.org/amazeui/2.7.2/js/amazeui.js"></script>-->
    <script src="http://cdn.amazeui.org/amazeui/2.7.2/js/amazeui.min.js"></script>
    <!--<script src="http://cdn.amazeui.org/amazeui/2.7.2/js/amazeui.ie8polyfill.js"></script>-->
    <script src="http://cdn.amazeui.org/amazeui/2.7.2/js/amazeui.ie8polyfill.min.js"></script>
    <!--<script src="http://cdn.amazeui.org/amazeui/2.7.2/js/amazeui.widgets.helper.js"></script>-->
    <script src="http://cdn.amazeui.org/amazeui/2.7.2/js/amazeui.widgets.helper.min.js"></script>
    <script src="src/js/common.js"></script>


</head>
<body>
<header data-am-widget="header" class="am-header mpy-header">
    <div class="am-header-left am-header-nav mpy-header-nav">
        <i class="am-icon-bars mpy-icon-bars mpy-header-menu"></i>
    </div>

    <h1 class="am-header-title mpy-header-title">
        <a href="#title-link" class="">
            <img src="src/img/icon/top-logo-icon.svg" alt="">
        </a>
    </h1>

    <div class="am-header-right am-header-nav mpy-header-nav">
        <a href="login1.html" class="">
            <img src="src/img/icon/icon-user.svg" alt="">
        </a>
    </div>
    <div class="mpy-menu">
        <div class="mpy-menu-hd">
            <a href="javascript:;" class="mpy-close">&times;</a>
            <div class="mpy-menu-title">
                <img src="src/img/icon/top-logo-icon-white.svg" alt="">
            </div>
        </div>
        <div class="mpy-menu-bd">
            <ul>
                <a href="javascript:;" class="mpy-active">
                    <li>首页</li>
                </a>
                <a href="javascript:;">
                    <li>关于爬梯</li>
                </a>
                <a href="javascript:;">
                    <li>爬梯产品</li>
                </a>
                <a href="javascript:;">
                    <li>爬梯课程</li>
                </a>
                <a href="javascript:;">
                    <li>最新动态</li>
                </a>
                <a href="javascript:;">
                    <li>联系我们</li>
                </a>
                <a href="javascript:;">
                    <li>购物车</li>
                </a>
                <a href="javascript:;">
                    <li>我的收藏</li>
                </a>
                <a href="javascript:;">
                    <li>爬梯客服</li>
                </a>
            </ul>
            <div class="mpy-menu-opt am-avg-sm-2">
                <a class="login">会员登录</a>
                <a class="reg">会员注册</a>
            </div>
            <div class="mpy-menu-userinfo">
                <a class="info">普通会员：12345678901</a>
            </div>
        </div>
    </div>
</header>

<div class="login">
    <div class="mpy-login">
        <div class="mpy-login-hd">
            <h1>欢迎登录音乐爬梯</h1>
            <h1>如果您已经是[音乐爬梯]会员，请直接登录。</h1>
        </div>
        <form action="" class=" mpy-form">
            <div class="am-form-group  mpy-form-group am-form-icon am-form-feedback ">
                <label>手机号码</label>
                <input type="text" class="userMobile" name="">
                <span class="state  "></span>
            </div>
            <div class="am-form-group  mpy-form-group am-form-icon am-form-feedback ">
                <label>输入密码</label>
                <input type="password" class="userPwd" name="">
                <span class="state "></span>
            </div>
            <div class="am-form-group  mpy-form-group am-form-icon am-form-feedback ">
                <label>验证码</label>
                <input id="loginCode" type="text" class="code" name="">
                <span class="state  "></span>
            </div>
            <div class="check-code">
                <a href="javascript:;"><img id="loginImgCode" src="${pageContext.request.contextPath}/validateCode"
                                            alt=""/></a>
                <a href="javascript:;" class="change-code-opt"><i class="check-code-refresh"></i>看不清楚，换一张</a>
            </div>
            <button class="btn-default" name="sumbit">立即登录</button>
        </form>
    </div>
    <div class="mpy-reg">
        <div class="mpy-login-hd">
            <h1>会员注册</h1>
            <h1>如果您还未拥有爬梯账号，可点击注册。</h1>
        </div>
        <a href="register.html" class="reg">会员注册</a>
    </div>
    <div class="mpy-forget">
        <div class="mpy-login-hd">
            <h1>欢迎登录音乐爬梯</h1>
            <h1>如果您已经是[音乐爬梯]会员，请直接登录。</h1>
        </div>
        <form action="" class=" mpy-form">
            <div class="am-form-group  mpy-form-group am-form-icon am-form-feedback am-g mpy-g">
                <label>手机号码</label>
                <div class="am-u-sm-7 mpy-y-sm-7">
                    <input type="text" class="userMobile mobile-find" name="">
                    <span class="state  "></span>
                </div>
                <a href="javascript:;" class=" sendCode_btn am-u-sm-4">发送验证码</a>
            </div>
            <div class="am-form-group  mpy-form-group am-form-icon am-form-feedback ">
                <label>手机验证码</label>
                <input type="text" class="code-find" name="">
                <span class="state  "></span>
            </div>
            <button class="btn-default">下一步</button>
        </form>
    </div>
</div>

<footer class="mpy-footer">
    <div class="mpy-ad-list">
        <a href="javascript:;">
            <picture>
                <source srcset="src/img/index/index-img3-1350.png" media="(min-width:901px)">
                <source srcset="src/img/index/index-img3-1080.png" media="(min-width:768px)">
                <source srcset="src/img/index/index-img3-810.png" media="(min-width:481px)">
                <img src="src/img/index/index-img3-540.png" alt="" class="mpy-hotLesson-img am-img-responsive">
            </picture>
        </a>
        <a href="javascript:;">
            <picture>
                <source srcset="src/img/index/index-img3-1350.png" media="(min-width:901px)">
                <source srcset="src/img/index/index-img3-1080.png" media="(min-width:768px)">
                <source srcset="src/img/index/index-img3-810.png" media="(min-width:481px)">
                <img src="src/img/index/index-img3-540.png" alt="" class="mpy-hotLesson-img am-img-responsive">
            </picture>
        </a>
        <a href="javascript:;">
            <picture>
                <source srcset="src/img/index/index-img3-1350.png" media="(min-width:901px)">
                <source srcset="src/img/index/index-img3-1080.png" media="(min-width:768px)">
                <source srcset="src/img/index/index-img3-810.png" media="(min-width:481px)">
                <img src="src/img/index/index-img3-540.png" alt="" class="mpy-hotLesson-img am-img-responsive">
            </picture>
        </a>

    </div>
    <div class="mpy-contactUs">
        <div class="mpy-contactUs-hd">
            <h1>联系我们</h1>
        </div>
        <div class="mpy-contactUs-bd">
            <!--  <img src="src/img/icon/icon-call-group.svg" alt="" usemap="#callMap">
              <map name="callMap" id="callMap">
                  <area shape="rect" coords="0,0,22,22" href="javascript:;" alt="">
                  <area shape="rect" coords="50,0,76,22" href="javascript:;" alt="">
                  <area shape="rect" coords="104,0,125,22" href="javascript:;" alt="">
              </map>-->
            <ul class="am-avg-sm-3 mpy-avg-sm-3">
                <li><a href="javascript:;"><img src="src/img/icon/icon-phone.svg" alt=""></a></li>
                <li><a href="javascript:;"><img src="src/img/icon/icon-wc.svg" alt=""></a></li>
                <li><a href="javascript:;"><img src="src/img/icon/icon-place.svg" alt=""></a></li>
            </ul>
            <a href="login1.html" class="mpy-contactUs-login mpy-btn-white">会员登陆</a>
            <a href="aboutUs.html" class="mpy-contactUs-abouts mpy-btn-white">关于爬梯</a>
        </div>
        <!--<div class="mpy-contactUs-footer">
            <span>快捷菜单</span>
            <span>></span>
        </div>-->
        <section data-am-widget="accordion" class="am-accordion am-accordion-gapped mpy-contactUs-footer" data-am-accordion='{  }'>
            <dl class="am-accordion-item ">
                <dt class="am-accordion-title">
                    <span>快捷菜单</span>
                </dt>
                <dd class="am-accordion-bd am-collapse ">
                    <a href="memberCenter.html">会员中心</a>
                    <a href="joinUs.html">加入我们</a>
                    <a href="contactUs.html">联络我们</a>
                    <a href="javascript:;">隐私条款</a>
                </dd>
            </dl>
        </section>
    </div>
    <div class="mpy-copyright">
        <span>(c)2016</span>
        <span>粤 ICP备16125023号</span>
    </div>
</footer>
<script type="text/javascript">
    var login={};
    login.isCheckMobile=false;
    login.isPwdCheck=false;
    login.codeCheck=false;
    $(function () {
        $('.change-code-opt').on('click',function(){
            $('#loginImgCode').attr({'src':'${pageContext.request.contextPath}/validateCode?'+Math.random()});
        });
        function statechange(self,state) {
            console.log(state);
            if(state=='state-success'){
                $(self).siblings('.state').removeClass('state-error state-warn am-icon-times am-icon-warning').addClass(state+" am-icon-check");
            }
            else if(state=='state-error'){
                $(self).siblings('.state').removeClass('state-success state-warn am-icon-check am-icon-warning').addClass(state + " am-icon-times");
            }
            else{
                $(self).siblings('.state').removeClass('state-success state-error am-icon-check am-icon-times').addClass(state +' am-icon-warning');
            }
        }
        function checkUserMobile(self){
            $.when($.checkPhone(self))
                    .done(function(result){
                        if(result){
                           // $(self).siblings('.state').html('ok');
                            statechange(self,'state-success');
                            login.isCheckMobile=true;
                        }
                    }).done(function(result){
                if(!result){
                   // $(self).siblings('.state').html('error');
                    statechange(self,'state-error');
                    login.isCheckMobile=false;
                }
            })
        }
        function checkCode(self){
            if($.checkCodeLength("#loginCode")){
                var loginCode=$("#loginCode").val();
                $.post('${pageContext.request.contextPath}/register/checkValidateCode/validateCode/'+loginCode)
                        .done(function(result){
                            if(result){
                               // $(self).siblings('.state').html('ok');
                                statechange(self,'state-success');
                                login.codeCheck=true;
                            }else{
                                $('#loginImgCode').attr({'src':'${pageContext.request.contextPath}/validateCode?'+Math.random()});
                                //$(self).siblings('.state').html('error');
                                statechange(self,'state-error');
                                login.codeCheck=false;
                            }
                        }).fail(function(){
                    //$(self).siblings('.state').html('服务器通信异常');
                    statechange(self,'state-warn');
                    login.codeCheck=false;
                });
            }else{
                login.codeCheck=false;
               // $(this).siblings('.state').html('error');
                statechange(this,'state-error');
            }
        }
        function checkUserPwd(self){
            $.when($.checkPwdLength('.userPwd')).done(function(result){
                if(!result){
                    //$(self).siblings('.state').html('密码长度不足');
                    statechange(self,'state-error');
                    login.isPwdCheck=false;
                }
            }).done(function(result){
                if(result){
                    //$(self).siblings('.state').html('ok');
                    statechange(self,'state-success');
                    login.isPwdCheck=true;
                }
            });
        }
        //验证手机号
        $('.userMobile').on({
            blur:function(){
                checkUserMobile(this);
            }
        })
        $('.code').on('blur',function () {
            checkCode(this);
        });

        $(".userPwd").on({
            blur:function(){
                checkUserPwd(this);
            }
        });

        //提交验证start
        $('.btn_submit').click(function (e) {
            e.preventDefault();
            if(!login.isCheckMobile){checkUserMobile($('.userMobile'));}
            if(!login.isPwdCheck){checkUserPwd($(".userPwd"));}
            if(!login.codeCheck){checkCode($('.code'));}
            if(login.isCheckMobile&&login.isPwdCheck&&login.codeCheck){
                document.forms[0].submit();
            }
            else{
                console.log(1111);
            }
        });
        //提交验证end

        //忘记密码
        $('.forget_href').click(function(){
            $('.modal-first > .modal-body').load("${pageContext.request.contextPath}/login/forgetPwd",function(){
                //关闭窗口
                $('.icon-close').on('click',function(){
                    $('.modal,.modal-bg').fadeOut();
                    window.location.reload();
                });
                $('.modal-first,.modal-bg').fadeIn();
            });
        });
    });

    //发送验证码
    $('.sendCode_btn').on('click',function(){
        $.when($.checkPhone('.mobile-find')).done(function(result){
            if(result){
                var mobile=$('.mobile-find').val();
                $.post("${pageContext.request.contextPath}/sms/recCode/"+mobile)
                        .done(function(data){
                            if(data){
                                $.countdown('.sendCode_btn',60);
                                $('.sendCode_btn').attr('disabled','true');
                               // $('.mobile-find').siblings('.state').css('display',"inline").html('发送成功');
                                statechange('.mobile-find','state-success');
                            }
                            else{
                               // $('.mobile-find').siblings('.state').html('发送失败');
                                statechange('.mobile-find','state-error');
                            }
                        })
            }
            else{
               // $('.mobile-find').siblings('.state').html('发送失败');
            }
        })
    });
</script>
<script>
    $(".mpy-header-menu").on("click", function () {
        $(".mpy-menu").fadeIn();
    })
    $('.mpy-close').on('click', function () {
        $(".mpy-menu").fadeOut();
    })
</script>
</body>
</html>